<!--商品详情-->
<style lang="less" scoped>
.goodspic-swiper{
  height:5.8rem;
  .swiper-slide img , .swiper-wrapper{
    height:100%;
  }
}
</style>
<template>
  <div class="contain">
    <app-header></app-header>
    <div class="swiper-container goodspic-swiper" v-if="imgArr.length>0">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="item in imgArr">
          <img :src="item | UniImgFilter">
        </div>
      </div>
      <div class="swiper-pagination"></div>
    </div>
    <div class="displayflex goods-detail">
      <div class="flex1 lft">
        <p>{{goodsItem.GoodsName}}</p>
        <p>{{goodsItem.GoodsSpec}}</p>
        <p>{{goodsItem.Producer}}</p>
      </div>
      <!-- <div class="rit active">
        <i class="iconfont icon-favorite"></i>
        <p class="tip">收藏</p>
      </div> -->
    </div>
    <div class="form-wrap">
      <!-- <div class="form-wrap-row">
        <div class="line displayflex">
          <div class="label">商品编号</div>
          <div class="text flex1">{{goodsItem.GoodsCode}}</div>
        </div>
      </div> -->
      <div class="form-wrap-row">
        <div class="line displayflex">
          <div class="label">商品大类</div>
          <div class="text flex1">{{goodsItem.GoodsCate | goodsCate}}</div>
        </div>
      </div>
      <div class="form-wrap-row">
        <div class="line displayflex">
          <div class="label">单价（元）</div>
          <div class="text flex1">{{goodsItem.Price}}</div>
        </div>
      </div>
    </div>
    <h2 class="form-tit-row">小包装</h2>
    <div class="form-wrap">
      <div class="form-wrap-row">
        <div class="line displayflex">
          <div class="label">包装含量</div>
          <div class="text flex1">{{goodsItem.MinUnitQty || '1'}}</div>
        </div>
      </div>
      <div class="form-wrap-row">
        <div class="line displayflex">
          <div class="label">包装单位</div>
          <div class="text flex1">{{goodsItem.MinUnitStyle || goodsItem.UnitStyle}}</div>
        </div>
      </div>
    </div>
    <!-- <template>
      <h2 class="form-tit-row">供应商信息</h2>
      <div class="form-wrap">
        <div class="form-wrap-row">
          <div class="top">{{goodsItem.ChineseName || '暂无信息'}}</div> 
          <div class="bottom" v-if="showAddress">{{goodsItem.Province | province}}{{goodsItem.City | city}}{{goodsItem.District | district}}{{goodsItem.Address}}</div>
        </div>
      </div>
    </template> -->
    <!-- <div class="form-btn" @click="edit">编辑</div> -->
  </div>
</template>

<script>
import appHeader from '@/components/core/header/app_header.vue';
import Swiper from '$static/swiper/swiper-3.4.2.min.js';
export default {
  components:{
    appHeader
  },
  data() {
    return {
      imgArr:[],
      goodsItem:[],
      showAddress: false,
    }
  },
  created(){
    this.goodsItems();
  },
  mounted() {
    this.$nextTick(function() {
      this.swiper();
    })
  },
  methods: {
    goodsItems(){
      if(sessionStorage.getItem('GoodItem')){
        this.goodsItem = JSON.parse(sessionStorage.getItem('GoodItem'));
      }
      var val = this.goodsItem.PictContent;
      if (val && val !== 'null' && val !== '') {
        let images = JSON.parse(val);
        images.forEach(x => {
          if(x && x !== '' && x !== 'null'){
            this.imgArr.push(x);
          }
        });
      }
      if(this.goodsItem.Province !== '' || this.goodsItem.City !== '' || this.goodsItem.District !== '' || this.goodsItem.Address !== '' ){
        this.showAddress = true;
      }
    },
    swiper() {
      let _this = this,
          mySwiper = new Swiper('.goodspic-swiper', {
            loop: false,
            pagination: '.swiper-pagination',
            paginationType: 'bullets',
            paginationClickable: true,
            paginationHide: true,
          })
    },
    edit(){
      sessionStorage.GoodItem = JSON.stringify(this.goodsItem);
      this.$router.push({
        path:'/goodsForm',
        query:{
          guid:this.goodsItem.Guid
        }
      })
    }
  },
  filters:{
    goodsCate(val){
      if(!val){
        return false;
      };
      switch(val){
        case '01':
          return '医疗器械';
          break;
        case '04':
          return '药品';
          break;
        case '05':
          return '后勤物资';
          break;
        case '06':
          return '消毒用品';
          break;
        case '07':
          return '洗涤用品';
          break;
        case '08':
          return '中药材';
          break;
        case '09':
          return '设施设备';
          break;
      }
    }
  }
}
</script>